import React, { Component } from 'react';

//组件更新时new props进行更新
class Demo extends Component {
  state = {};
  static getDerivedStateFromProps(props, state) {
    console.log("1 getDerivedStateFromProps", props);
    return null;
  };
  shouldComponentUpdate(nextProps, nextState) {
    console.log("2 shouldComponentUpdate");
    //优化 减少不必要的更新
  if(nextProps.msg === this.props.msg){
    return false;
  }
    return true;//组件更新
    // return false;//组件不更新
  };
  render() {
    console.log("3 执行render函数");
    return <h1>Demo组件{this.props.msg}</h1>
  };
  getSnapshotBeforeUpdate(props, state) {
    console.log("4 getSnapshotBeforeUpdate");
    return 100;
  };
  componentDidUpdate(props, state, snapshot) {
    console.log("5 ComponentUpdate");
    console.log("来自getsnapshotBeforeUpdata得值:", snapshot);
  };
};
class App extends Component {
  state = {
    msg: "(*OO*)"
  };
  handleClick = (params) => {
  this.setState({
    msg: "(*OO*)"
  })
  };
  render() {
    return (
      <div>
        <Demo msg={this.state.msg}> </Demo>
        <button onClick={this.handleClick}>变^(*——(oo)——)^</button>
      </div>
    );
  }
}

export default App;
